<!--
 * @Author: your name
 * @Date: 2020-03-26 09:41:08
 * @LastEditTime: 2020-03-26 09:41:10
 * @LastEditors: Please set LastEditors
 * @Description: 白白赚  ---  缺少签名参数
 -->

<template>
  <div>
    <van-form class="white">
      <!-- 账号 -->
      <van-field
        v-model="ruleForm.mobilePhone"
        type="tel"
        maxlength="11"
        label="账号"
        placeholder="请填写账号"
        clearable
      />
      <!-- 密码 -->
      <van-field
        v-model="ruleForm.passWord"
        type="password"
        label="密码"
        placeholder="请填写密码"
        clearable
      />
      <!-- 任务类型 -->
      <van-field v-model="IntervalTime" type="tel" label="抢单间隔(s)" placeholder="请填写抢单间隔" clearable />
      <van-field name="radio" label="任务类型">
        <template #input>
          <van-radio-group v-model="type" direction="horizontal">
            <van-radio
              v-for="(option, index) in typeOptions"
              :key="index"
              :name="option.type"
              checked-color="#e4393c"
            >{{ option.label }}</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <!-- 提示 -->
      <van-cell-group>
        <van-cell class="van-cell__tip" v-for="(content, index) in returnContent" :key="index" :title="content" />
      </van-cell-group>
    </van-form>
    <!-- 按钮 -->
    <div class="popup-open__btn">
      <van-button type="warning">做单</van-button>
      <van-button type="danger" @click="onStart">{{ startFlag ? '停止接单' : '开始接单' }}</van-button>
    </div>

    <!-- 选择账号 -->
    <van-dialog
      v-model="show"
      title="选择接单账号"
      :showCancelButton="true"
      @cancel="onCancel"
      @confirm="onConfirm"
    >
      <van-cell v-for="(account, index) in accountArray" :key="index" center :title="account.no">
        <template #right-icon>
          <van-switch v-model="account.checked" active-color="#e4393c" size="24" />
        </template>
      </van-cell>
    </van-dialog>
  </div>
</template>

<script>
import dayjs from "dayjs";
import md5 from 'js-md5';
import * as white from "@/api/white";
export default {
  name: "White",
  props: {
    index: {
      type: String,
      default: ''
    },
    item: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      // 参数
      ruleForm: {
        mobilePhone: "17717751808",
        passWord: "Zz930329",
        mode: 10
      },
      // 循环时间
      IntervalTime: 8,
      // 任务类型
      type: "0",
      typeOptions: [
        { label: "当日单", type: "0" },
        { label: "流量单", type: "2" }
      ],
      // 开始登陆 标记
      startFlag: false,
      // 定时器
      timer: null,
      // 任务ID
      taskId: "",
      // 接口返回提示
      returnContent: [],
      // 已有平台
      iconItems: [],
      memberNo: "",
      sign: "",
      show: false,
      valueRegex: /value="(.+?)"/g,
      textRegex: /<div style="font-size: 14px; line-height:24px; color:#000; margin-top:5px;">(.+?)<\/div>/g,
      accountArray: [],
      accountId: [],
      tb_nick: "",
      tb_id: ""
    };
  },
  watch: {
    // 监听接单状态
    startFlag() {
      this.iconItems =
        this.$store.getters.iconItems.length !== 0
          ? this.$store.getters.iconItems
          : this.$storage.get("iconItems");
          this.iconItems[this.index].opened = this.startFlag ? '已启动' : '待启动';
      this.$store.commit("SET_ICONITEMS", this.iconItems);
      this.$storage.set("iconItems", this.iconItems);
    },
    returnContent() {
      
      if (this.returnContent.length >= 10) {
        this.returnContent = this.returnContent.filter((item, i) => i < 5);
      }
    }
  },
  created() {},
  methods: {
    // 开始接单
    onStart() {
      this.onLogin();
    },
    // 登录
    onLogin() {
      const _this = this;
      if (!this.startFlag) {
        this.headers = "";
         this.returnContent = [];
        this.startFlag = true;
        // 登录提示
        this.returnContent.unshift(
          dayjs().format("HH:mm:ss") + " " + "正在登录"
        );
        // 异步登录
        let param = {
          type: "post",
          data: this.ruleForm
        };
        white.ajaxFun(white.getLogin, param, res => {
          _this.returnContent.unshift(
            dayjs().format("HH:mm:ss") + " " + res.msg
          );
          if (res.code === 0) {
            // 登录成功
            _this.accountArray = [];
            _this.accountId = [];
            _this.memberNo = res.memberNo;
            _this.sign = res.sign;
            let param = {
              type: "get",
              dataType: "text"
            };
            white.ajaxFun(white.getFramePageAccept + _this.sign, param, res => {
              if (res.match(_this.textRegex)) {
                res.match(_this.valueRegex).forEach(item => {
                  if (item.split('"')[1] < 10) {
                    _this.accountId.push({
                      no: item.split('"')[1],
                      checked: false
                    });
                  }
                });
                res.match(_this.textRegex).forEach(item => {
                  if (
                    item.slice(76, item.length - 6) !== "京东账号" &&
                    item.slice(76, item.length - 6) !== "拼多多账号"
                  ) {
                    _this.accountArray.push({
                      no: item.slice(76, item.length - 6),
                      checked: false
                    });
                  }
                });
                _this.show = true;
              } else {
                _this.startFlag = false;
              }
            });
          } else {
            _this.startFlag = false;
          }
        });
      } else {
        this.returnContent.unshift(
          dayjs().format("HH:mm:ss") + " " + "接单取消"
        );
        this.$toast({
          message: "已停止接单",
          onClose: () => {
            clearInterval(_this.timer);
            _this.startFlag = false;
          }
        });
      }
    },
    // 选择账号
    onConfirm() {
      const _this = this;
      this.accountArray.forEach((item, i) => {
        if (item.checked) {
          let accept = _this.accountId[i];
          this.onGetAccept(accept.no);
        }
      });
    },
    // 取消
    onCancel() {
      this.startFlag = false;
    },
    // 接单
    onGetAccept(accept) {
      let param = {
        type: "post",
        data: {
          APPID: "20191202000001",
          SYSMemberNo: this.memberNo,
          accept: accept,
          memberStructureCode: "10",
          random: Math.floor(Math.random() * (10 - 100) + 100),
          timestamp: dayjs().unix(),
          version: "1.0",
          versionAPP: "37",
          versionMode: "10",
          sign: md5(this.sign)
        }
      };
      white.ajaxFun(white.getAccept, param, () => {});
    }
  }
};
</script>

<style lang="scss" scoped>
.popup-open__form-code {
  width: 100%;
  @include flex($flexWrap: nowrap);
  .van-image {
    flex: 0 0 100px;
    height: 44px;
  }
}
</style>